<template>
	<view>
		<view style="width:100%;">
		    <view style="width:100%;height:200px;display:flex;align-items:center;">
		        <view style="width:60px;height:90px;margin:0 auto;">
		            <view style="width:60px;height:60px;">
		                <image src="../../static/center/xingyun.png" style="width:100%;height:100%;">
		            </view>
		            <view style="width:130px;height:30px;font-size:20px;line-height:40px;">
		                <span style="color:orange;font-size:12px;">幸运币：</span><span id="jifen">{{xingyunbi}}</span>
		            </view>
		        </view>
		    </view>
		    <view style="width:80%;margin:0 auto;border: 1rpx #DDDDDD solid;border-radius: 10rpx;background-color: white;">
		        <input @input="yanzheng" style="text-align:center;padding: 16rpx 0 16rpx 0;" v-model="duihuanNum" type="number" pattern="/d" placeholder="请输入需要兑换的数量" />
		    </view>
		    <view style="width:210px;margin:20px auto;">
		        <view @click="submit_duihuan()" style="height:40px;line-height: 40px;width:210px;background:orange;color:white;text-align:center;border-radius:5px;">兑换</view>
		    </view>
		    <view @click="duihuanRecord()" style="height:30px;width:100%;color:orange;line-height:30px;text-align:center;margin:10px auto;position: fixed;bottom:0px;font-size:13px;">兑换记录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usersId:'',			//用户ID
				xingyunbi:0,		//幸运币数量
				duihuanNum:'',		//输入的兑换数量
				count:0,			//兑换次数
			}
		},
		onLoad() {
			this.usersId = uni.getStorageSync('usersId');
			this.getXingyunbiNum();
			uni.$on("getXingyunbiNum",this.getXingyunbiNum);
		},
		methods: {
			//获取幸运币数量
			getXingyunbiNum(){
				this.$http.get('/xingyun/xingyunbixcx',{
					usersid:this.usersId
				}).then(res => {
					if(res.data.code==200){
						this.xingyunbi = res.data.data
					}else{
						this.$u.toast("请先登录")
					}
				})
			},
			//兑换
			submit_duihuan(){
				if(this.count==0){
					console.log("兑换数量："+this.duihuanNum+" 总幸运币："+this.xingyunbi)
					if(this.isNull(this.duihuanNum)){
						this.$u.toast("请输入需要兑换的数量")
						return
					}
					if(this.duihuanNum <= 0){
						this.$u.toast("兑换数量需大于0")
						return
					}
					this.count++
					uni.navigateTo({
						url:'payPwd?payPrice='+this.duihuanNum
					})
				}else{
					this.$u.toast("已经兑换，不能重复兑换")
				}
			},
			//跳转兑换记录
			duihuanRecord(){
				uni.navigateTo({
					url:'myLuckbi'
				})
			},
			//验证
			yanzheng(e){
				this.duihuanNum = e.target.value.replace(/[^0-9]/ , '')
			},
			//判空
			isNull(str){
				return str==null || str==undefined || str==""
			}
		}
	}
</script>

<style>

</style>
